<template>
  <div @touchmove="onScroll">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了~"
      @load="onLoad"
    >
      <slot />
    </van-list>
  </div>
</template>

<script>
  export default {
    name: 'FkList',
    props: {
      pageSize: {
        type: Number,
        default: 10,
      },
      load: {
        type: Function,
      },
    },
    data() {
      return {
        loading: false,
        finished: false,
        pageNo: 1,
      }
    },
    methods: {
      onLoad() {
        this.loading = true
        return this.load({ pageNo: this.pageNo })
          .then((res) => {
            if (!res) {
              this.finished = true
              return
            }
            this.loading = false
            if (res.length < this.pageSize) {
              this.finished = true
            }
            this.pageNo += 1
          })
          .catch((err) => {
            this.loading = false
            this.finished = true
          })
      },
      onScroll(e) {
        const target = e.currentTarget
        if (target.scrollTop) {
          e.stopPropagation()
        }
      },
      refresh() {
        this.pageNo = 1
        this.loading = true
        this.finished = false
        return this.onLoad()
      },
    },
  }
</script>

<style lang="less" scoped>
  .vanlist {
  }
</style>
